import React, { useState } from "react";
import style from "./style.module.scss";
import { useNavigate } from "react-router-dom";
import { EmptyPage, MyNavBar } from "../../../../components";

import system_information from "../../../../assets/images/image/hdpi/system_information.png";
import interview_news from "../../../../assets/images/image/hdpi/interview_news.png";
import recorded_message from "../../../../assets/images/image/hdpi/recorded_message.png";
import { useRequest } from "ahooks";
import { useAppSelector } from "../../../../store/hooks";
import {
  getHealthyCurrencyNoticeList,
  getInquiryNoticeList,
  getSystemNoticeList,
  getUserNoticeReadNum,
  putModifyAllStatus,
} from "../../../../api/my";

// 消息列表类型
interface messageConentItemRawState {
  messageUrl: string;
  messageTitle: string;
  className: string;
  count: number;
  noticeList: noticeListRawState[];
}

// 用户通知列表类型
interface noticeListRawState {
  id: number;
  content: string;
  createTime: number;
}
// 用户未读消息数类型
interface noticeReadNumRawState {
  notReadNum: number;
  noticeType: number;
}

const Index: React.FC = () => {
  const navigate = useNavigate();

  const [isFlag, setIsFlag] = useState(true);

  const userId = useAppSelector((state) => state.user.userInfo.userId);
  const sessionId = useAppSelector((state) => state.user.userInfo.sessionId);

  // 用户系统通知列表
  const { data: systemNoticeList = [] } = useRequest(async () => {
    const resp = await getSystemNoticeList(1, 10, userId, sessionId);
    return resp.result as noticeListRawState[];
  });

  // 用户问诊通知列表
  const { data: inquiryNoticeList = [] } = useRequest(async () => {
    const resp = await getInquiryNoticeList(1, 10, userId, sessionId);
    return resp.result as noticeListRawState[];
  });

  // 用户H币通知列表
  const { data: healthyCurrencyNoticeList = [] } = useRequest(async () => {
    const resp = await getHealthyCurrencyNoticeList(1, 10, userId, sessionId);
    return resp.result as noticeListRawState[];
  });

  // 查询用户未读消息数
  const { data: userNoticeReadNum = [] } = useRequest(async () => {
    const resp = await getUserNoticeReadNum(userId, sessionId);
    return resp.result as noticeReadNumRawState[];
  });

  // 修改消息状态为全部已读
  const onUpdate = async () => {
    await putModifyAllStatus(userId, sessionId);
  };

  // 关闭通知 ==> 'X'
  const onOff = () => {
    setIsFlag(false);
  };

  const [messageConentItem] = useState<messageConentItemRawState[]>([
    {
      messageUrl: system_information,
      messageTitle: "系统消息",
      className: "systemMessage",
      count: userNoticeReadNum.length && userNoticeReadNum[0].notReadNum,
      noticeList: systemNoticeList,
    },
    {
      messageUrl: interview_news,
      messageTitle: "问诊消息",
      className: "consultationMessage",
      count: userNoticeReadNum.length && userNoticeReadNum[1].notReadNum,
      noticeList: inquiryNoticeList,
    },
    {
      messageUrl: recorded_message,
      messageTitle: "H币入账消息",
      className: "accountMessage",
      count: userNoticeReadNum.length && userNoticeReadNum[2].notReadNum,
      noticeList: healthyCurrencyNoticeList,
    },
  ]);

  return (
    <div className={style.message_my}>
      {systemNoticeList.length &&
      inquiryNoticeList.length &&
      healthyCurrencyNoticeList.length ? (
        <EmptyPage title="消息" desc="暂无消息" path="/my"></EmptyPage>
      ) : (
        <div>
          {/* 头部 */}
          <MyNavBar
            title="消息"
            style={{ backgroundColor: "#fff" }}
            onClickLeft={() => navigate(-1)}
            rightText={
              <div
                className={style.rightText}
                onClick={() => {
                  onUpdate();
                }}
              >
                全部已读
              </div>
            }
          ></MyNavBar>
          {/* 通知 */}
          {isFlag && (
            <div className={style.inform_box}>
              <div className={style.inform}>
                <div className={style.inform_text_box}>
                  <div
                    className={style.inform_closeBtn}
                    onClick={() => onOff()}
                  >
                    ×
                  </div>
                  <div className={style.inform_text}>
                    打开系统通知,H币入账等消息不错过
                  </div>
                </div>
                <button className={style.inform_btn}>开启</button>
              </div>
            </div>
          )}
          {/* 消息主体 */}
          <div className={style.message_conent}>
            {messageConentItem.length &&
              messageConentItem.map((item, ind) => {
                return (
                  <div
                    className={style.message_conent_item}
                    key={ind}
                    onClick={() =>
                      navigate(`/my/message/detail`, {
                        state: { detailTitle: item.messageTitle },
                      })
                    }
                  >
                    <div className={style.message_conent_dl}>
                      <div className={style.message_conent_dt}>
                        <img src={item.messageUrl} alt="" />
                      </div>
                      <div className={style[item.className]}>
                        {item.messageTitle}
                      </div>
                    </div>
                    <div className={style.message_counent_tips}>
                      {item.count === 0 ? "" : item.count}
                    </div>
                  </div>
                );
              })}
          </div>
        </div>
      )}
    </div>
  );
};

export default Index;
